<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    img {
      display: block;
      width: 200px;
      height: 200px;
    }


    div> :nth-child(2) {
      width: 2000px;
    }
  </style>
</head>

<body>
  <div>
    <div>Lorem ipsum dolor sit.</div>
    <div>Tempora ea rem quo.</div>
    <div>Ex iste atque temporibus.</div>
    <div>Harum libero iusto non.</div>
    <div>Eveniet debitis nam vel.</div>
    <div>Eius obcaecati dolorum cum.</div>
    <div>Fugit hic cupiditate repellat!</div>
    <div>Quam impedit ea repellat?</div>
    <div>Unde nobis excepturi recusandae!</div>
    <div>Harum dolore voluptatibus sit.</div>
    <div>Nulla nobis natus labore!</div>
    <div>Est provident totam quam.</div>
    <div>Lorem ipsum dolor sit.</div>
    <div>Tempora ea rem quo.</div>
    <div>Ex iste atque temporibus.</div>
    <div>Harum libero iusto non.</div>
    <div>Eveniet debitis nam vel.</div>
    <div>Eius obcaecati dolorum cum.</div>
    <div>Fugit hic cupiditate repellat!</div>
    <div>Quam impedit ea repellat?</div>
    <div>Unde nobis excepturi recusandae!</div>
    <div>Harum dolore voluptatibus sit.</div>
    <div>Nulla nobis natus labore!</div>
    <div>Est provident totam quam.</div>
    <div>Lorem ipsum dolor sit.</div>
    <div>Tempora ea rem quo.</div>
    <div>Ex iste atque temporibus.</div>
    <div>Harum libero iusto non.</div>
    <div>Eveniet debitis nam vel.</div>
    <div>Eius obcaecati dolorum cum.</div>
    <div>Fugit hic cupiditate repellat!</div>
    <div>Quam impedit ea repellat?</div>
    <div>Unde nobis excepturi recusandae!</div>
    <div>Harum dolore voluptatibus sit.</div>
    <div>Nulla nobis natus labore!</div>
    <div>Est provident totam quam.</div>
    <div>Hic, saepe. Nam, ducimus.</div>
    <div>Nisi laboriosam non corporis.</div>
    <div>Fugit quisquam nulla at.</div>
    <div>Praesentium blanditiis error a.</div>
    <div>Voluptatem atque ex maxime.</div>
    <div>Perspiciatis ex est officiis.</div>
    <div>Debitis ducimus officia placeat.</div>
    <div>Explicabo natus saepe consequatur!</div>
    <div>Ipsum ullam pariatur deserunt.</div>
    <img src="" data-img="https://i0.hdslb.com/bfs/sycp/creative_img/202206/3cd802302846041eb4e4a37ade1306ca.jpg@.webp"
      alt="" width="200px">
    <div>Dolores, exercitationem. Iusto, atque?</div>
    <div>Corporis, alias. Sapiente, libero!</div>
    <div>Cum, placeat? Minus, tenetur?</div>
    <div>Laboriosam saepe minus atque.</div>
    <div>Modi ab incidunt suscipit.</div>
    <div>Sapiente rem dolorum labore?</div>
    <div>Culpa magni consequatur necessitatibus.</div>
    <div>Facilis mollitia saepe in.</div>
    <div>Earum nostrum quas maxime.</div>
    <div>Veritatis quisquam vel repellendus?</div>
    <div>Modi eos voluptatem sint.</div>
    <img src=""
      data-img="https://i0.hdslb.com/bfs/archive/fcc8a40d7bf9b853b87bc79f1de9fae060005fcb.jpg@336w_190h_1c.webp" alt=""
      width="200px">

    <div>Culpa accusantium fuga reprehenderit.</div>
    <div>Totam tempora consectetur officiis!</div>
    <div>Esse odio architecto molestias.</div>
    <div>Consequatur aspernatur voluptatum quasi.</div>
    <div>Exercitationem ipsam asperiores tempora.</div>
    <div>Voluptatibus qui non vero.</div>
    <div>Ipsum at voluptas ea?</div>
    <img src=""
      data-img="https://i0.hdslb.com/bfs/archive/485b4bf35931757e9b89344251f1aaa328df1d8b.jpg@336w_190h_1c.webp" alt=""
      width="200px">
    <div>Magnam maiores officia repellendus!</div>
    <div>Lorem ipsum dolor sit.</div>
    <div>Tempora ea rem quo.</div>
    <div>Ex iste atque temporibus.</div>
    <div>Harum libero iusto non.</div>
    <div>Eveniet debitis nam vel.</div>
    <div>Eius obcaecati dolorum cum.</div>
    <div>Fugit hic cupiditate repellat!</div>
    <div>Quam impedit ea repellat?</div>
    <div>Unde nobis excepturi recusandae!</div>
    <div>Harum dolore voluptatibus sit.</div>
    <div>Nulla nobis natus labore!</div>
    <div>Est provident totam quam.</div>
    <div>Hic, saepe. Nam, ducimus.</div>
    <div>Nisi laboriosam non corporis.</div>
    <div>Fugit quisquam nulla at.</div>
    <div>Praesentium blanditiis error a.</div>
    <div>Voluptatem atque ex maxime.</div>
    <div>Perspiciatis ex est officiis.</div>
    <div>Debitis ducimus officia placeat.</div>
    <div>Explicabo natus saepe consequatur!</div>
    <div>Ipsum ullam pariatur deserunt.</div>
    <img src=""
      data-img="https://i2.hdslb.com/bfs/archive/aaedc1be5816519a383312d4f8d6e03131bb0bc0.jpg@336w_190h_1c.webp" alt=""
      width="200px">
    <div>Dolores, exercitationem. Iusto, atque?</div>
    <div>Corporis, alias. Sapiente, libero!</div>
    <div>Cum, placeat? Minus, tenetur?</div>
    <div>Laboriosam saepe minus atque.</div>
    <div>Modi ab incidunt suscipit.</div>
    <div>Sapiente rem dolorum labore?</div>
    <div>Culpa magni consequatur necessitatibus.</div>
    <div>Facilis mollitia saepe in.</div>
    <div>Earum nostrum quas maxime.</div>
    <div>Veritatis quisquam vel repellendus?</div>
    <div>Modi eos voluptatem sint.</div>
    <img src=""
      data-img="https://i1.hdslb.com/bfs/archive/cf24befbc547e26a95073e5f35dd66303bffa338.jpg@336w_190h_1c.webp" alt=""
      width="200px">
  </div>
  <script>
    function lazyLoad_1 () {
      const imgs = document.querySelectorAll('img')
      window.addEventListener('scroll', (e) => {
        imgs.forEach(img => {
          const imgTop = img.getBoundingClientRect().top
          // 说明图片出现在了可视区域
          if (imgTop < window.innerHeight) {
            const img_src = img.getAttribute('data-img')
            img.setAttribute('src', img_src)
            console.log(111)
          }
        })
      })
    }
    // lazyLoad_2()
    function lazyLoad_2 () {
      const imgs = document.querySelectorAll('img')
      // 回调函数接收两个参数，一个是监视的数组以及一个实例
      const observe = new IntersectionObserver((entries) => {
        entries.forEach(img => {
          if (img.isIntersecting) {
            const image = img.target
            const img_src = image.getAttribute('data-img')
            image.setAttribute('src', img_src)
            console.log('监视结束')
            observe.unobserve(image)
          }
        })
      })
      imgs.forEach(item => {
        observe.observe(item)
      })
    }
    lazyLoad_2()
  </script>
</body>

</html>